<template>
	
	  
	<el-table class="mb20" :data="tableData" border style="width: 100%">
		<el-table-column prop="index" label="顺序" />
		<el-table-column prop="numbers" label="手机号码" />
		<el-table-column prop="ssbm" label="部门" />
		<el-table-column prop="hdname" label="名称" />	
		<el-table-column prop="name" label="姓名" />
		<el-table-column  label="兑换时间" >
		<template #default="scope">
			
			
			<span >{{dayjs(scope.row.createtime*1000).format("YYYY-MM-DD")}}</span>	
				
		</template>
		</el-table-column>
		
		<el-table-column label="操作">
			<template #default="scope">
				<el-button v-show="scope.row.dhzt==0" size="mini"
					@click="edit({row:scope.row,index:scope.$index},(x)=>{edites(x)})">
					兑换</el-button>
				
				<span v-show="scope.row.dhzt==1">已兑换</span>	
					
			</template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="modalStatecode" title="二维码">
		
		<div v-if="modalStatecode" style="width: 80%;margin: 0 auto;text-align: center;" class="qrcode" ref="qrCodeUrl"></div>
	    
	</el-dialog>	
	<el-dialog v-model="modalState" title="标题">
		<el-form :model="form" ref="rule" :rules="rules">
			
			
			
          
		   <el-form-item label="兑换码"  :label-width="formLabelWidth">	   	
		          <el-input v-model="code" autocomplete="off"></el-input>
		   </el-form-item>
		   
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit('rule')">确定</el-button>			
			</span>
		</template>
	</el-dialog>
	
	
</template>

<script lang="ts">

			

	import QRCode from 'qrcodejs2'
	import moment from "moment"
	import editorWang from '../components/wangEnduit'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	import dayjs from "dayjs"
	export default {
		components:{
			editorWang
		},
		watch:{
			times(){
				this.form.starttime=this.times[0];
				this.form.endtime=this.times[1];
			},
		},
		data() {
			return {
				dayjs,
				yzm:"",
				code:"",
				viewarr:[],
				modalStatewins:false,
				hdqtxmname:"",//     名称
				hdorders :"",//   加排序
				numbers :"",//  手机
				modalStatewin:false,
				qrcode:null,
				modalStatecode:false,
				vtimes:['',''],
				formLabelWidth: '120px',
				times:"",
				form: {
					num:"",
					images:"",
					jifen:"",
					orders:"",
					hdname:"",
				},
				tableData:[],
				rules: {
				        
						
						
				},
				pid: []
			}
		},
		mounted() {
			this.getData();		
		},
		methods: {
			
			
			edites(data){
				console.log(data.row)
				data.row.is_show=data.row.is_show+'';
				delete data.row.ewmid;
				var data =JSON.parse(JSON.stringify(data.row))
				this.times=[data.starttime,data.endtime];	
			},
			
           
			getData() {
				this.$http.post("/index.php/index/Hddh/hthddhlist").then(data => {
					data.forEach((t,i)=>{
						t.index=i+1;
					})
					this.tableData=data;

				})
			},
			submit(ref) {
				console.log(this.$refs)
				if(this.code!=this.form.yzm){
					ElMessage({
								message:  '请输入正确的兑换码',
								type: 'error',
							})
					return 
				}
					this.$http.post("/index.php/index/Hddh/hthddhzt",
						{...this.form}).then(data => {
						console.log(data)
						this.modalState = false;
						ElMessage({
							message: '兑换成功',
							type: 'success',
						})
						this.getData();
					})
				// this.doRules(this.$refs[ref]).then(()=>{
				// 	if (this.id) this.form.id = this.id;
					
				
				// })
				
			},
			remove(data){
				this.$http.post("/index.php/index/Hddh/hddhdel",{id:data.row.id}).then(data => {
					ElMessage({
						message: '删除成功' ,
						type: 'success',
					})
					this.getData();
				})
			},
			handleAvatarSuccess(file) {

				this.form.image = file.data;
			},
			


		}
	}
</script>
